<template>
	<view class="intention-update">
		<!-- 客户信息 -->
		<view class="customer-info-card">
			<view class="customer-avatar">
				<text
					class="avatar-text">{{ customerInfo.customerName ? customerInfo.customerName.charAt(0) : ''}}</text>
			</view>
			<view class="customer-details">
				<text class="customer-name">{{ customerInfo.customerName || '加载中...' }}</text>
				<text class="customer-phone">{{ customerInfo.phone || '' }}</text>
			</view>
		</view>

		<view class="form-section">
			<view class="section-title">
				<text class="title-text">基本信息</text>
				<text class="title-required"></text>
			</view>
			<view class="form-item">
				<text class="item-label">其它联系方式</text>
				<uni-easyinput v-model="formData.otherPhones"  placeholder="输入电话号码多个用/隔开"></uni-easyinput>
			</view>
			
			<view class="form-item">
				<text class="item-label">认知途径</text>
				<!-- <view class="multi-select-tags">
			<view class="tag no-letter" v-for="house in $sourceType"
				:class="{ 'active': house.value == formData.formType }" :key="house.value"
				@tap="typeTap(house,'formType')">
				<text class="tag-text">{{ house.text }}</text>
			</view>
		</view> -->
				<picker class="item-picker" mode="selector" :range="$sourceType"
					@change="onFormOptions($event,'formType',$sourceType)" range-key="text">
					<view class="picker-content">
						<text class="picker-text"
							:class="{'active':formData.formType}">{{ getText($sourceType,formData.formType) || '请选择' }}</text>
						<text class="picker-arrow">▼</text>
					</view>
				</picker>
			</view>
			<view class="form-item">
				<text class="item-label">年龄段</text>
				<!-- <view class="multi-select-tags">
			<view class="tag no-letter" v-for="house in $ages"
				:class="{ 'active': house.value == formData.ageType }" :key="house.value"
				@tap="typeTap(house,'ageType')">
				<text class="tag-text">{{ house.text }}</text>
			</view>
		</view> -->
				<picker class="item-picker" mode="selector" :range="$ages"
					@change="onFormOptions($event,'ageType',$ages)" range-key="text">
					<view class="picker-content">
						<text class="picker-text"
							:class="{'active':formData.ageType}">{{ getText($ages,formData.ageType) || '请选择' }}</text>
						<text class="picker-arrow">▼</text>
					</view>
				</picker>
			</view>
			<view class="form-item">
				<text class="item-label">家庭结构</text>
				<!-- <view class="multi-select-tags">
			<view class="tag no-letter" v-for="house in $familyList"
				:class="{ 'active': house.value == formData.family }" :key="house.value"
				@tap="typeTap(house,'family')">
				<text class="tag-text">{{ house.text }}</text>
			</view>
		</view> -->

				<picker class="item-picker" mode="selector" :range="$familyList"
					@change="onFormOptions($event,'family',$familyList)" range-key="text">
					<view class="picker-content">
						<text class="picker-text"
							:class="{'active':formData.family}">{{ getText($familyList,formData.family) || '请选择' }}</text>
						<text class="picker-arrow">▼</text>
					</view>
				</picker>
			</view>
			<view class="form-item">
				<text class="item-label">购房用途</text>
				<!-- <view class="multi-select-tags">
			<view class="tag no-letter" v-for="house in $useTypeList"
				:class="{ 'active': house.value == formData.useType }" :key="house.value"
				@tap="typeTap(house,'useType')">
				<text class="tag-text">{{ house.text }}</text>
			</view>
		</view> -->
				<picker class="item-picker" mode="selector" :range="$useTypeList"
					@change="onFormOptions($event,'useType',$useTypeList)" range-key="text">
					<view class="picker-content">
						<text class="picker-text"
							:class="{'active':formData.useType}">{{ getText($useTypeList,formData.useType) || '请选择' }}</text>
						<text class="picker-arrow">▼</text>
					</view>
				</picker>
			</view>
			<view class="form-item">
				<text class="item-label">居住区域</text>
				<view class="multi-select-tags">
					<view class="tag no-letter" v-for="house in $liveList"
						:class="{ 'active': house.value == formData.liveAddress }" :key="house.value"
						@tap="typeTap(house,'liveAddress')">
						<text class="tag-text">{{ house.text }}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 意向等级 -->
		<view class="form-section">
			<view class="section-title">
				<text class="title-text">意向等级</text>
				<text class="title-required">*</text>
			</view>
			<view class="level-grid">
				<view class="level-item" v-for="level in intentionLevels" :key="level.value"
					:class="{ active: formData.intention_level === level.value }"
					@tap="formData.intention_level = level.value">
					<view class="level-dot" :style="{ backgroundColor: level.color }"></view>
					<text class="level-text">{{ level.label }}</text>
				</view>
			</view>
		</view>

		<!-- 意向房源 -->
		<view class="form-section">
			<view class="section-title">
				<text class="title-text">意向房源</text>
			</view>

			<view class="form-item">
				<text class="item-label">面积</text>
				<!-- <view class="multi-select-tags">
					<view class="tag no-letter" v-for="house in areas"
						:class="{ 'active': house.value == formData.area }" :key="house.value"
						@tap="typeTap(house,'area')">
						<text class="tag-text">{{ house.text }}</text>
					</view>
				</view> -->
				<picker class="item-picker" mode="selector" :range="areas" @change="onFormOptions($event,'area',areas)"
					range-key="text">
					<view class="picker-content">
						<text class="picker-text"
							:class="{'active':formData.area}">{{ getText(areas,formData.area) || '请选择' }}</text>
						<text class="picker-arrow">▼</text>
					</view>
				</picker>
			</view>

			<view class="form-item">
				<text class="item-label">户型</text>
				<view class="multi-select-tags">
					<view class="tag" v-for="house in $houseTypes"
						:class="{ 'active': house.value == formData.houseType }" :key="house.value"
						@tap="typeTap(house,'houseType')">
						<text class="tag-text">{{ house.label }}</text>
					</view>
				</view>
			</view>

			<view class="form-item">
				<text class="item-label">产品</text>
				<view class="multi-select-tags">
					<view class="tag" v-for="product in productList" :key="product.value"
						:class="{ active: product.value== formData.product }" @tap="typeTap(product,'product')">
						<text class="tag-text">{{ product.label }}</text>
					</view>
				</view>
			</view>

			<view class="form-item">
				<text class="item-label">楼栋 {{formData.building}}</text>
				<view class="multi-select-tags">
					<view class="tag" v-for="product in $buildings" :key="product.value"
						:class="{ active: product.value== formData.building }" @tap="typeTap(product,'building')">
						<text class="tag-text">{{ product.text }}</text>
					</view>
				</view>
			</view>

			<view class="form-item">
				<text class="item-label">楼层</text>
				<view class="multi-select-tags">
					<view class="tag" v-for="product in $floors" :key="product.value"
						:class="{ active: product.value== formData.floor }" @tap="typeTap(product,'floor')">
						<text class="tag-text">{{ product.text }}</text>
					</view>
				</view>
			</view>

			<view class="form-item">
				<text class="item-label">朝向</text>
				<view class="multi-select-tags">
					<view class="tag" v-for="product in $houseArrow" :key="product.value"
						:class="{ active: product.value== formData.houseArrow }" @tap="typeTap(product,'houseArrow')">
						<text class="tag-text">{{ product.text }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 预算信息 -->
		<view class="form-section">
			<view class="section-title">
				<text class="title-text">预算信息</text>
			</view>

			<!-- 总价预算 - 范围 -->
			<view class="form-item">
				<text class="item-label">总价预算(万元)</text>

				<view class="multi-select-tags">
					<view class="tag no-letter" v-for="budge in budgetList"
						:class="{ 'active': budge.value == formData.budget }" :key="budge.value"
						@tap="typeTap(budge,'budget')">
						<text class="tag-text">{{ budge.text }}</text>
					</view>
				</view>
				<!-- <picker class="item-picker" mode="selector" :range="budgetList" @change="onFormOptions"
					range-key="text">
					<view class="picker-content">
						<text class="picker-text">{{ formData.budget || '请选择' }}</text>
						<text class="picker-arrow">▼</text>
					</view>
				</picker> -->
			</view>

			<view class="form-item">
				<text class="item-label">预期单价</text>

				<view class="multi-select-tags">
					<view class="tag no-letter" v-for="budge in $priceList"
						:class="{ 'active': budge.value == formData.priceYQ }" :key="budge.value"
						@tap="typeTap(budge,'priceYQ')">
						<text class="tag-text">{{ budge.text }}</text>
					</view>
				</view>
				<!-- <picker class="item-picker" mode="selector" :range="budgetList" @change="onFormOptions"
					range-key="text">
					<view class="picker-content">
						<text class="picker-text">{{ formData.budget || '请选择' }}</text>
						<text class="picker-arrow">▼</text>
					</view>
				</picker> -->
			</view>

			<!-- 付款方式 -->
			<view class="form-item">
				<text class="item-label">付款方式</text>
				<view class="payment-options">
					<view class="payment-option" v-for="option in paymentOptions" :key="option.value"
						:class="{ active: formData.payment_method === option.value }"
						@click="formData.payment_method = option.value">
						<text class="payment-text">{{ option.label }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 购房目的 -->
		<view class="form-section">
			<view class="section-title">
				<text class="title-text">关注因素</text>
			</view>
			<view class="purpose-grid">
				<view class="purpose-item" v-for="purpose in purchasePurposes" :key="purpose.value"
					:class="{ 'active': isSelected(purpose.value) }"
					@tap="toggleIndex(purchasePurposes,purpose.value,'purchase_purpose')">
					<text class="purpose-text">{{ purpose.label }}</text>
				</view>
			</view>
			
			<view class="form-item">
			<text class="item-label">抗性</text>
			<view class="multi-select-tags">
				<view class="tag" v-for="product in $badList" :key="product.value"
					:class="{ active: product.value== formData.badReason }" @tap="typeTap(product,'badReason')">
					<text class="tag-text">{{ product.text }}</text>
				</view>
			</view>
			</view>
		</view>


		<!-- 预计购买时间 -->
		<view class="form-section">
			<view class="section-title">
				<text class="title-text">预计购买时间</text>
			</view>
			<picker class="time-picker" mode="date" :value="formData.purchase_timeline" @change="onDateChange">
				<view class="picker-content">
					<text class="picker-text"
						:class="{'active':formData.purchase_timeline}">{{ formData.purchase_timeline || '选择预计购买日期' }}</text>
					<text class="picker-arrow">▼</text>
				</view>
			</picker>
		</view>

		<!-- 备注 -->
		<view class="form-section">
			<view class="section-title">
				<text class="title-text">备注</text>
			</view>
			<textarea class="demand-textarea" placeholder="请输入备注信息" v-model="formData.remark" maxlength="200"
				:show-confirm-bar="false"></textarea>
			<text class="textarea-count">{{ formData.remark ? formData.remark.length : 0 }}/200</text>
		</view>

		<!-- 提交按钮 -->
		<view class="action-buttons">
			<button class="submit-btn" @tap="updateForm" :disabled="isSubmitting">
				{{ isSubmitting ? '提交中...' : '提交' }}
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				intentionId: '', // 意向记录ID
				formData: {
					intention_level: '',
					area: '',
					houseType: '',
					product: '',
					budget: '',
					payment_method: '',
					purchase_purpose: [],
					purchase_timeline: '',
					remark: "",
					formType: '',
					ageType: '',
					family: "",
					useType: '',
					liveAddress: '',
					'wuye':"",
					'building':"",
					'floor':"",
					'houseArrow':"",
					'priceYQ':"",
					'badReason':"",
					otherPhones:''

				},
				customerInfo: {},
				intentionLevels: [

					{
						label: 'A级（高意向）',
						value: 1,
						color: '#ff4d4f'
					},
					{
						label: 'B级（中等意向）',
						value: 2,
						color: '#1890ff'
					},
					{
						label: 'C级（一般意向）',
						value: 3,
						color: '#fa8c16'
					},
					{
						label: 'D级（低意向）',
						value: 4,
						color: '#52c41a'
					},
					{
						label: 'E级（低意向）',
						value: 5,
						color: '#52c41a'
					}
				],
				buildings: [{
						label: '1号楼',
						value: '1号楼'
					},
					{
						label: '2号楼',
						value: '2号楼'
					}
				],
				houseTypes: [{
						label: '一室',
						value: '1'
					},
					{
						label: '两室',
						value: '2'
					},
					{
						label: '三室',
						value: '3'
					},
					{
						label: '四室',
						value: '4'
					},
				],
				productList: [{
						label: '高层',
						value: '1'
					},
					{
						label: '洋房',
						value: '2'
					},
					{
						label: '别墅',
						value: '3'
					},
					{
						label: '商业',
						value: '4'
					},
				],
				paymentOptions: [{
						label: '全款',
						value: '1'
					},
					{
						label: '商业贷款',
						value: '2'
					},
					{
						label: '公积金贷款',
						value: '3'
					},
					{
						label: '组合贷款',
						value: '4'
					}
				],
				// 50以下，60，70，80，90，100，110，120，130，140，150以上
				areas: [{
						"text": "50以下",
						"value": 50
					},
					{
						"text": "60",
						"value": 60
					},
					{
						"text": "70",
						"value": 70
					},
					{
						"text": "80",
						"value": 80
					},
					{
						"text": "90",
						"value": 90
					},
					{
						"text": "100",
						"value": 100
					},
					{
						"text": "110",
						"value": 110
					},
					{
						"text": "120",
						"value": 120
					},
					{
						"text": "130",
						"value": 130
					},
					{
						"text": "140",
						"value": 140
					},
					{
						"text": "150以上",
						"value": 150
					}
				],
				purchasePurposes: [{
						label: '户型',
						value: '1',
					},
					{
						label: '面积',
						value: '2',
					},
					{
						label: '开发商',
						value: '3',
					},
					{
						label: '投资回报',
						value: '4',
					},
					{
						label: '地理位置',
						value: '5',
					},
					{
						label: '物业管理',
						value: '6',
					},
					{
						label: '配套',
						value: '7',
					},
					{
						label: '学校',
						value: '8',
					}, {
						label: '价格',
						value: '9',
					}
				],
				isSubmitting: false,
				budgetList: [{
						"text": "70以下",
						"value": "70"
					},
					{
						"text": "70-90",
						"value": "80"
					},
					{
						"text": "90-110",
						"value": "100"
					},
					{
						"text": "110-130",
						"value": "120"
					},
					{
						"text": "130-150",
						"value": "140"
					},
					{
						"text": "150-170",
						"value": "160"
					},
					{
						"text": "170以上",
						"value": "180"
					}
				]

			}
		},

		onLoad() {
			const curCustomerInfo = uni.getStorageSync('curCustomerInfo')
			let data = {
				...curCustomerInfo.intentionInfo
			}
			if(!data.remark){
				data.remark = curCustomerInfo.remark
			}
			if(Array.isArray(curCustomerInfo.otherPhones) && curCustomerInfo.otherPhones.length){
				this.formData.otherPhones = curCustomerInfo.otherPhones.toString()
			}else{
				this.formData.otherPhones = ''
			}
			this.customerInfo = curCustomerInfo
			delete data.otherPhones
			this.processFormData(data)
			// this.formData = {...curCustomerInfo.intentionInfo}
		},

		methods: {
			getText(arr, val) {
				let res = ''
				if (Array.isArray(val)) {
					val.map(item => {
						arr.map(one => {
							if (one.value == item) {
								res = res + ' ' + one.text
							}
						})
					})
				} else {
					for (var key in arr) {
						const item = arr[key]
						if (item.value == val) {
							res = item.text
							break;
						}
					}
				}
				return res
			},
			typeTap(e, type) {
				this.formData[type] = e.value
				this.$forceUpdate()
				console.log(this.formData)
			},

			onFormOptions(e, type, list) {
				this.formData[type] = list[e.detail.value].value

				console.log('this.formData[type]', this.formData[type])
				this.$forceUpdate()
			},
			toggleIndex(arr, val, type) {
				const index = this.formData[type].findIndex(item => {
					return item == val
				})

				if (index > -1) {
					this.formData[type].splice(index, 1)
				} else {
					console.log('this.formData[type]', this.formData[type])
					this.formData[type].push(val)
				}

				// this.$forceUpdate()
			},

			// 检查楼栋是否选中
			isSelected(val) {
				let res = this.formData.purchase_purpose.findIndex(item => {
					return item == val
				}) > -1
				return res
				console.log('res', res)
			},

			// 日期选择
			onDateChange(e) {
				this.formData.purchase_timeline = e.detail.value
			},

			// 加载客户信息
			loadCustomerInfo(customerId) {
				this.customerInfo = uni.getStorageSync('curCustom')
			},


			// 处理表单数据，兼容新旧格式
			processFormData(data) {
				// 基础字段直接赋值
				Object.keys(this.formData).forEach(key => {
					if (data[key] !== undefined && data[key] !== null) {
						this.formData[key] = data[key]
					}
				})

				if (!Array.isArray(data.purchase_purpose)) {
					console.log('isArray')
					data.purchase_purpose = []
					this.formData.purchase_purpose = []
				}

			},


			// 更新表单
			async updateForm() {

				this.isSubmitting = true

				// 准备更新数据，转换为schema格式
				const updateData = {
					customerId: this.customerInfo._id,
					...this.formData
				}
				delete updateData._id
				if(updateData.otherPhones){
					updateData.otherPhones = updateData.otherPhones.split(',').filter(item => item.trim() !== '');
				}else{
					updateData.otherPhones = []
				}
				
				
				console.log('updateData',updateData)

				await this.$cloudOBjAjax('suuny-custom', 'updatIntention', {
					id: this.customerInfo._id,
					data: updateData
				}).catch(err => {
					uni.showToast({
						title: '更新失败，请重试',
						icon: 'none'
					})
				}).then(res => {
					uni.showToast({
						title: '更新成功',
						icon: 'success'
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				}).finally(() => {
					this.isSubmitting = false
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.intention-update {
		padding: 30rpx;
		background: #f5f6fa;
		min-height: 100vh;
	}

	/* 客户信息卡片 */
	.customer-info-card {
		background: white;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		display: flex;
		align-items: center;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
	}

	.customer-avatar {
		width: 48px;
		height: 48px;
		text-align: center;
		background: #e1f2fa;
		border-radius: 50%;
		margin-right: 10px;
	}

	.avatar-text {
		font-size: 20px;
		color: #498CFE;
		line-height: 48px;
	}

	.customer-details {
		display: flex;
		flex-direction: column;
	}

	.customer-name {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 8rpx;
	}

	.customer-phone {
		font-size: 26rpx;
		color: #666;
	}

	/* 表单区域 */
	.form-section {
		background: white;
		border-radius: 20rpx;
		padding: 20rpx 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
	}

	.section-title {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.title-text {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-right: 8rpx;
	}

	.title-required {
		color: #ff4757;
		font-size: 24rpx;
	}

	/* 意向等级网格 */
	.level-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;
	}

	.level-item {
		display: flex;
		align-items: center;
		padding: 24rpx;
		border: 2rpx solid #e0e0e0;
		border-radius: 12rpx;
		background: #fafafa;
		transition: all 0.3s ease;
	}

	.level-item.active {
		border-color: rgba(0, 123, 255, 1);
		background: rgba(0, 123, 255, 0.3);
		color: #3F88FF;
	}

	.level-dot {
		width: 24rpx;
		height: 24rpx;
		border-radius: 50%;
		margin-right: 16rpx;
	}

	.level-text {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
	}

	/* 表单项 */
	.form-item {
		margin-bottom: 30rpx;
	}

	.item-label {
		display: block;
		font-size: 28rpx;
		color: #333;
		margin-bottom: 16rpx;
		font-weight: 500;
	}

	/* 多选标签样式 */
	.multi-select-tags {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
	}

	.tag {
		padding: 10rpx 20rpx;
		border: 2rpx solid #e0e0e0;
		border-radius: 10rpx;
		background: #fafafa;
		font-size: 28rpx;
		transition: all 1s ease;

		&.no-letter {
			.tag-text {
				letter-spacing: 2rpx !important;
			}
		}
	}

	.tag.active {
		border-color: rgba(0, 123, 255, 1);
		background: rgba(0, 123, 255, 0.3);
		color: #3F88FF;

		.tag-text {
			font-size: 26rpx;
			letter-spacing: 10rpx;
			color: #3F88FF;
			font-weight: bold;
		}

	}

	.tag-text {
		font-size: 26rpx;
		letter-spacing: 10rpx;
		color: #333;
	}

	/* 选择器样式 */
	.time-picker {
		margin-bottom: 20rpx;
	}

	.picker-content {
		border: 2rpx solid #e0e0e0;
		border-radius: 10rpx;
		padding: 20rpx;
		background: #fafafa;
		display: flex;
		justify-content: space-between;
		align-items: center;
		transition: all 0.3s ease;
	}

	.picker-content:active {
		background: #f0f0f0;
	}

	.picker-text {
		font-size: 28rpx;
		color: #333;

		&.active {
			color: #3F88FF;
			font-weight: bold;
		}
	}

	.picker-text:placeholder {
		color: #ccc;
	}

	.picker-arrow {
		color: #999;
		font-size: 24rpx;
	}

	/* 楼层输入 */
	.floor-inputs,
	.budget-inputs {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.floor-input,
	.budget-input {
		flex: 1;
		border: 2rpx solid #e0e0e0;
		border-radius: 12rpx;
		padding: 20rpx;
		font-size: 28rpx;
		background: #fafafa;
		text-align: center;
	}

	.floor-separator,
	.budget-separator {
		font-size: 28rpx;
		color: #666;
	}

	.floor-unit,
	.budget-unit {
		font-size: 28rpx;
		color: #666;
		width: 60rpx;
	}

	/* 付款方式 */
	.payment-options {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;
	}

	.payment-option {
		padding: 20rpx;
		border: 2rpx solid #e0e0e0;
		border-radius: 12rpx;
		background: #fafafa;
		text-align: center;
		transition: all 0.3s ease;
	}

	.payment-option.active {
		border-color: rgba(0, 123, 255, 1);
		background: rgba(0, 123, 255, 0.3);
		color: #3F88FF;

		.payment-text {
			font-size: 26rpx;
			font-weight: bold;
			color: #3F88FF;
		}
	}

	.payment-text {
		font-size: 26rpx;
		color: #333;
		letter-spacing: 10rpx;
	}

	/* 购房目的网格 */
	.purpose-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 20rpx;
		margin-bottom: 20rpx;
	}

	.purpose-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 24rpx 16rpx;
		border: 2rpx solid #e0e0e0;
		border-radius: 12rpx;
		background: #fafafa;
		transition: all 0.3s ease;
	}

	.purpose-item.active {
		border-color: rgba(0, 123, 255, 1);
		background: rgba(0, 123, 255, 0.3);
		color: #3F88FF;

		.purpose-text {
			font-size: 24rpx;
			color: #3F88FF;
			font-weight: bold;
		}
	}

	.purpose-icon {
		font-size: 36rpx;
		margin-bottom: 12rpx;
	}

	.purpose-text {
		font-size: 24rpx;
		color: #333;
		letter-spacing: 4rpx;
		font-weight: 500;
	}

	/* 需求文本域 */
	.demand-textarea {
		width: 100%;
		height: 160rpx;
		border: 2rpx solid #e0e0e0;
		border-radius: 12rpx;
		padding: 24rpx;
		font-size: 28rpx;
		background: #fafafa;
		margin-bottom: 16rpx;
		box-sizing: border-box;
	}

	.textarea-count {
		display: block;
		text-align: right;
		font-size: 24rpx;
		color: #999;
	}

	/* 提交按钮 */
	.action-buttons {
		padding: 40rpx 0;
	}

	.submit-btn {
		color: white;
		border: none;
		border-radius: 4rpx;
		font-size: 32rpx;
		font-weight: 600;
		width: 100%;
		line-height: 80rpx;
		height: 80rpx;
	}

	.submit-btn:disabled {
		opacity: 0.6;
	}
</style>